<?php 

	$link = mysql_connect("localhost", "admin", "Xurpas123");
	mysql_select_db("smsnic",$link);
	
	$result= mysql_query("select * from (SELECT t.`id`, t.`nombre`,t.`fecha`,
						 IFNULL(count(t.ide), 0) as mensajes
						from (select c.id, cl.nombres, c.nombre, e.fecha, e.id as ide, e.estado 
						FROM 
						  `envios` e 
						  inner join `conversaciones` c on (e.`id_conv` = c.`id`)
						  inner join `mensajes` m on (e.`id_mensaje` = m.`id`)
						  inner join `telefonos` t on (e.`id_telefono` = t.`id`)
						  inner join cliente cl on (t.`telefono` like concat ('505',cl.`telefono`))
						  inner join `operadora` o on (t.`operadora_id` = o.`id`)
						  inner join estado est on (e.`estado` = est.`id`)
						  order by e.fecha) as t  
						group by t.id) as tt where tt.fecha > '".$fecha_ini."' and tt.fecha < '".$fecha_fin."'", $link) or die(mysql_error());
						
				$i=0;		
while ($rowEmp = mysql_fetch_assoc($result)) 
		{
		 
		 
		  $datos1[]= floatval($rowEmp['mensajes']); //$rowEmp['conteo'];
		  $datos2[]="'".$rowEmp['nombre']."'";
		  $datos4[]=$rowEmp['fecha'];
		  
		  $cant = floatval($rowEmp['mensajes']);
		  $nombre = $rowEmp['nombre'];
													  
											$resultdetalle= mysql_query("SELECT t.`id`, t.`nombres`, t.`nombre`,t.`fecha`,
														   IFNULL(CASE when t.`estado` = 1 then count(t.ide) end, 0) as Enviados,
															IFNULL(CASE when t.`estado` = 2 then count(t.ide) end, 0) as No_Enviados,
															IFNULL(CASE when t.`estado` = 0 then count(t.ide) end,0) as Pendientes
															from (select c.id, cl.nombres, c.nombre, e.fecha, e.id as ide, e.estado 
														FROM 
														   `envios` e 
														  inner join `conversaciones` c on (e.`id_conv` = c.`id`)
														  inner join `mensajes` m on (e.`id_mensaje` = m.`id`)
														  inner join `telefonos` t on (e.`id_telefono` = t.`id`)
														  inner join cliente cl on (t.`telefono` like concat ('505',cl.`telefono`))
														  inner join `operadora` o on (t.`operadora_id` = o.`id`)
														  inner join estado est on (e.`estado` = est.`id`)
														  order by e.fecha) as t where t.id = ".$rowEmp['id']."
														group by t.id", $link) or die(mysql_error());
																	
															
															$enviados=0;
														$noenviados=0;
														$pendientes=0;	
											while ($rowdetalle = mysql_fetch_assoc($resultdetalle)) 
													{
														$enviados= $rowdetalle['Enviados'];
														$noenviados=$rowdetalle['No_Enviados'];
														$pendientes=$rowdetalle['Pendientes'];
							
													}
		  
		  
			$slash[] =  "{y: $cant, 
			color: colors[$i],
			drilldown: {
				name: '$nombre',
				categories: ['Enviados', 'No Enviados', 'Pendientes'],
				data: [$enviados, $noenviados, $pendientes],
				color: colors[$i]
			}						
		}";
		$i++;		
	     
	   }
			
?>

<!DOCTYPE HTML>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<title>Highcharts Example</title>
		
		
		<!-- 1. Add these JavaScript inclusions in the head of your page -->

        <script type="text/javascript" src="../graficos/js/highcharts.js"></script>
		
		<!-- 1a) Optional: add a theme file -->
		<!--
			<script type="text/javascript" src="../js/themes/gray.js"></script>
		-->
		
		<!-- 1b) Optional: the exporting module -->
		<script type="text/javascript" src="../graficos/js/modules/exporting.js"></script>
		
		
		<!-- 2. Add the JavaScript to initialize the chart on document ready -->
		<script type="text/javascript">
		
			var chart;
			$(document).ready(
			function() {
				
				var colors = Highcharts.getOptions().colors,
					categories = [<?php echo implode($datos2, ','); ?>], //nombre de las conversaciones
					name = 'Estado de las Conversaciones	',
					data = [
							<?php 
								echo implode($slash, ',');
								?>
						];
						

				function setChart(name, categories, data, color) {
					chart.xAxis[0].setCategories(categories);
					chart.series[0].remove();
					chart.addSeries({
						name: name,
						data: data,
						color: color || 'white'
					});
				}
				
				chart = new Highcharts.Chart({
					chart: {
						renderTo: 'container', 
						type: 'column'
					},
					title: {
						text: 'Estado de las Conversaciones '
					},
					subtitle: {
						text: 'Click en la barra para visualizar el detalle del estado de los mensajes de cada conversacion. Click nuevamente para regresar.'
					},
					xAxis: {
						categories: categories							
					},
					yAxis: {
						title: {
							text: 'Cantidad de mensajes'
						}
					},
					plotOptions: {
						column: {
							cursor: 'pointer',
							point: {
								events: {
									click: function() {
										var drilldown = this.drilldown;
										if (drilldown) { // drill down
											setChart(drilldown.name, drilldown.categories, drilldown.data, drilldown.color);
										} else { // restore
											setChart(name, categories, data);
										}
									}
								}
							},
							dataLabels: {
								enabled: true,
								color: colors[0],
								style: {
									fontWeight: 'bold'
								},
								formatter: function() {
									return this.y +' sms';
								}
							}					
						}
					},
					tooltip: {
						formatter: function() {
							var point = this.point,
								s = this.x +':<b>'+ this.y +' mensajes</b><br/>';
							if (point.drilldown) {
								s += 'Click para visualizar la conversacion '+ point.category +' ';
							} else {
								s += 'Click para regresar';
							}
							return s;
						}
					},
					series: [{
						name: name,
						data: data,
						color: 'white'
					}], 
					exporting:{
						enabled: true
						

					}
				});
				
				
			});
			
			
				
		</script>
		
	</head>
	<body>
		
		<!-- 3. Add the container -->
		<div id="container" style="width: 800px; height: 400px; margin: 0 auto"></div>
		
				
	</body>
</html>
